<!DOCTYPE html>
<html>
<head>
    <title>Bespin scroller test</title>
    <link rel="stylesheet" href="sproutcore.css" type="text/css" />
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        require.preload(["ref-send", "sandbox", "narwhal/client", "array", "object", "string", "function", "regexp", "reactor", "date", "global", "system", "binary"]);
        require.async('bespin/boot');

        window.onBespinLoad = function() {
            var SC = require('sproutcore');
            var scroller = require('bespin/editor/views/scroller');

            var controller = SC.Object.create({
                content: function(key, value) {
                    var items = [];
                    for (var i = 0; i < 1000; i++)
                        items.push({ title: "" + i });
                    return items;
                }.property().cacheable()
            });

            var rootElement = document.getElementById('root');
            var left = 0, top = 0;
            var element = rootElement;
            while (element !== null) {
                if (!isNaN(element.offsetLeft))
                    left += element.offsetLeft;
                if (!isNaN(element.offsetTop))
                    top += element.offsetTop;
                element = element.parentNode;
            }

            var view = SC.MainPane.create({
                layout: {
                    top:    top,
                    left:   left,
                    width:  427,
                    height: 320
                },

                layoutStyle: function() {
                    var layout = this.get('layout');
                    return { width: layout.width, height: layout.height };
                }.property('layout').cacheable(),

                childViews: 'scrollView'.w(),
                scrollView: SC.ScrollView.design({
                    layout: { top: 0, left: 0, width: 427, height: 320 },

                    hasHorizontalScroller: true,
                    autohidesHorizontalScroller: false,
                    horizontalScrollerView: scroller.BespinScrollerView,

                    hasVerticalScroller: true,
                    autohidesVerticalScroller: false,
                    verticalScrollerView: scroller.BespinScrollerView,

                    contentView: SC.ImageView.design({
                        layout: {
                            left: 0,
                            top: 0,
                            width: 1233,
                            height: 1176
                        },
                        value:  "/firefox.png"
                    })
                }) 
            });
            view.scrollView.contentView.bind('content', controller, 'content');
            view.appendTo(document.getElementById('root'));
        }
    </script>
</head>
<body>
    <p>
        This is a test of the Bespin scroll bars. They're first class
        SproutCore widgets, so they can be used in any SproutCore ScrollView!
    </p>
    <div id="root" style="position: relative;"></div>
</body>
</html>

